<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
    <style>
        .table>tbody>tr>td{
            text-align:center;
        }
        .table>thead:first-child>tr:first-child>th{
            text-align:center;
        }
    </style>
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1 animated fadeInRight">
    <#include "./top_nav.ftl">

        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>设备配置</h2>
                <ol class="breadcrumb">
                    <li>
                        消防可视化管理系统
                    </li>
                    <li class="active">
                        设备配置
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">

            <div class="ibox-content">
                <div class="">
                    <div >
                        <button <#if (role_type_id > 1)>disabled</#if> type="button" style="margin-bottom: 10px;" class="btn btn-outline btn-primary" data-toggle="modal" data-target="#addModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加用户信息传输装置</button>
                    </div>
                    <div class="modal inmodal" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content animated bounceInUp">
                                <div class="modal-header">
                                    <i class="fa fa-desktop modal-icon"></i>
                                    <h4 class="modal-title">添加用户信息传输装置</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="deviceForm" class="form-horizontal">
                                        <div class="form-group"><label class="col-lg-3 control-label">IP</label>
                                            <div class="col-lg-9"><input id="hostIP" type="text"  class="form-control" required></div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-3 control-label">值班室电话</label>
                                            <div class="col-lg-9"><input ID="hostPHONE" type="text"  class="form-control" required></div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-3 control-label">名称</label>
                                            <div class="col-lg-9"><input id="hostNAME" type="text"  class="form-control" required></div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-3 control-label">描述</label>
                                            <div class="col-lg-9"><input id="hostDETAIL" type="text"  class="form-control" required></div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button id="hostCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                    <button id="hostSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id="deviceTable" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>用户信息传输装置名称</th>
                            <th>用户信息传输装置IP</th>
                            <th>值班室电话</th>
                            <th>用户信息传输装置备注</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>
<div class="modal inmodal" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInUp">
            <div class="modal-header">
                <i class="fa fa-desktop modal-icon"></i>
                <h4 class="modal-title">修改用户信息传输装置</h4>
            </div>
            <div class="modal-body">
                <form id="deviceUpdateForm" class="form-horizontal">
                    <div style="display: none;" class="form-group"><label class="col-lg-3 control-label">ID</label>
                        <div class="col-lg-9"><input id="updateID" type="text"  class="form-control" required></div>
                    </div>
                    <div class="form-group"><label class="col-lg-3 control-label">IP</label>
                        <div class="col-lg-9"><input id="updateIP" type="text"  class="form-control" required></div>
                    </div>
                    <div class="form-group"><label class="col-lg-3 control-label">值班室电话</label>
                        <div class="col-lg-9"><input ID="updatePHONE" type="text"  class="form-control" required></div>
                    </div>
                    <div class="form-group"><label class="col-lg-3 control-label">名称</label>
                        <div class="col-lg-9"><input id="updateNAME" type="text"  class="form-control" required></div>
                    </div>
                    <div class="form-group"><label class="col-lg-3 control-label">描述</label>
                        <div class="col-lg-9"><input id="updateDETAIL" type="text"  class="form-control" required></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="updateCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                <button id="updateSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
            </div>
        </div>
    </div>
</div>

<#include "./js.ftl">

<script>
    $(function(){
        socketInit("//" + getURL() + "${baseURL}")
    });

    var deviceTable = $('#deviceTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/xkDevice/getAll",
        columns:[
            {"data":"name"},
            {"data":"ip"},
            {"data":"phone"},
            {"data":"description"},
            {"data":"status","render": function ( data, type, row, meta ) {
                if(data === 0){
                    return '<button  type="button" class="btn btn-block btn-danger" style="padding: 0 0 0 0">离&nbsp;&nbsp;线</button>';
                }
                else{
                    return '<button type="button" class="btn btn-block btn-primary" style="padding: 0 0 0 0">在&nbsp;&nbsp;线</button>';
                }
            },"width":"10%"},
            {"data":"id","render": function ( data, type, row, meta ) {
                var obj = encodeURIComponent(JSON.stringify(row));
                return   '<div  class="col-sm-12" style="padding: 0 0 0 0;"><div class="col-sm-6" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> data-toggle="modal" data-target="#updateModal" onclick='+"editBtn("+'"'+obj+'"'+")"+ ' type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;编&nbsp;辑</button></div> <div class="col-sm-6" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> onclick="deleteBtn('+data+')" type="button" class="btn btn-block btn-warning" style="padding: 0 0 0 0;"><i class="fa fa-trash"></i>&nbsp;&nbsp;删&nbsp;除</button></div></div>'
            }}
        ],
        paging: false,
        searching:false,
        destroy: true
    });

    function editBtn(obj){
        var data = JSON.parse(decodeURIComponent(obj));
        $("#updateID").val(data.id);
        $("#updateIP").val(data.ip);
        $("#updatePHONE").val(data.phone);
        $("#updateNAME").val(data.name);
        $("#updateDETAIL").val(data.description);
    }

    function deleteBtn(id){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/xkDevice/delete?id=" + id,
            success:function(data){
                if(data.code === 0){
                    deviceTable.ajax.reload();
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "操作失败。",
                    type: "error"
                })
            }
        });
    }

    $("#hostSave").click(function(){
        var ip = $("#hostIP").val();
        var phone = $("#hostPHONE").val();
        var name = $("#hostNAME").val();
        var description = $("#hostDETAIL").val();
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/xkDevice/add",
            data: JSON.stringify({"name":name, "ip":ip,"phone":phone,"description":description}),
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "操作成功",
                        type: "success"
                    },function(){
                        $("#hostCANCEL").click();
                        deviceTable.ajax.reload();
                    });
                }
                else{
                    swal({
                        title: data.data,
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText);
                swal({
                    title: "提交失败，请检查输入的内容。",
                    type: "error"
                })
            }
        });
    });

    $("#updateSave").click(function(){
       var id =  $("#updateID").val();
       var ip =  $("#updateIP").val();
       var phone =  $("#updatePHONE").val();
       var name =  $("#updateNAME").val();
       var description =  $("#updateDETAIL").val();

        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/xkDevice/update",
            data: JSON.stringify({"id":id,"name":name, "ip":ip,"phone":phone,"description":description}),
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "操作成功",
                        type: "success"
                    },function(){
                        $("#updateCANCEL").click();
                        deviceTable.ajax.reload();
                    });
                }
                else{
                    swal({
                        title: data.data,
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText);
                swal({
                    title: "提交失败，请检查输入的内容。",
                    type: "error"
                })
            }
        });
    });

</script>
</body>
</html>